<template>
  <div class="s-container">
    <div>
      <span class="title">数据模型通过率</span>
      <div class="content">
        <div class="chart">
          <throughRate :value="designRate" />
          <p>设计通过率</p>
        </div>
        <div class="system">
          <div v-for="item in systemData" @click="handleDialog(item)">
            <div class="top">
              <img :src="item.imgUrl" />
              <span>{{ item.name }}</span>
            </div>
            <div class="bottom">
              <p class="left">
                <span>{{ item.num }}</span
                >{{ item.unit }}
              </p>
              <div class="right" :class="{ on: !item.isUp }">
                <p class="text">{{ item.isUp ? "同比增长" : "同比下降" }}</p>
                <p class="rate">
                  <img :src="`${item.isUp ? upArrow : downArrow}`" />
                  <span>{{ item.rate }}%</span>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <Dialog :title="dialogData.title" :visible="dialogData.visible" :fathUrl="dialogData.fathUrl" @close="dialogData.visible = false" />
</template>

<script setup>
import throughRate from "./charts/dashboard1.vue";
import { onMounted, reactive, ref } from "vue";
import Dialog from "@/components/Dialog/Dialog.vue";
import tjIcon from "@/static/tjIcon.png";
import shIcon from "@/static/shIcon.png";
import tgIcon from "@/static/tgIcon.png";
import upArrow from "@/static/upArrow.png";
import downArrow from "@/static/downArrow.png";
import { GETgetSjtgl, GETgetSjtjs, GETgetSjshtgs, GETgetYcxtgl } from "../../../api/dataSource";

let systemData = ref([
  {
    key: "sjtjs",
    imgUrl: tjIcon,
    name: "设计提交数",
    num: "0",
    unit: "个",
    isUp: false,
    rate: "5",
  },
  {
    key: "sjshtgs",
    imgUrl: shIcon,
    name: "设计审核通过数",
    num: "0",
    unit: "个",
    isUp: true,
    rate: "5",
  },
  {
    key: "ycxtgl",
    imgUrl: tgIcon,
    name: "一次通过率",
    num: "0",
    unit: "%",
    isUp: true,
    rate: "5",
  },
]);

let designRate = ref(0);
let dialogData = reactive({ title: "", visible: false, fathUrl: "" });

function initData() {
  //设计通过率
  GETgetSjtgl().then((res) => {
    designRate.value = res.data.value?.replace("%", "") || 0;
    designRate.value = Number(designRate.value);
    console.log("designRate", designRate.value);
  });
  //设计提交数
  GETgetSjtjs().then((res) => {
    systemData.value.forEach((item) => {
      if (item.key == "sjtjs") {
        item.num = res.data.count || 0;
      }
    });
  });
  //设计审核通过数
  GETgetSjshtgs().then((res) => {
    systemData.value.forEach((item) => {
      if (item.key == "sjshtgs") {
        item.num = res.data.count || 0;
      }
    });
  });
  //一次性通过率
  GETgetYcxtgl().then((res) => {
    systemData.value.forEach((item) => {
      if (item.key == "ycxtgl") {
        item.num = res.data.value?.replace("%", "") || 0;
      }
    });
  });
}

function handleDialog(data) {
  if (data.key == "sjtjs") {
    dialogData.visible = true;
    dialogData.title = data.name;
    dialogData.fathUrl = "/zjjscApi/datasource/getJyxtdjsMx";
  }
}

onMounted(() => {
  initData();
});
</script>

<style scoped lang="scss">
.s-container {
  p {
    margin: 0;
    padding: 0;
  }

  .title {
    position: relative;
    display: block;
    height: 26px;
    padding-left: 20px;
    font-size: 16px;
    font-weight: bold;
    color: transparent;
    background-image: linear-gradient(to bottom, #fff, #98bbff);
    -webkit-background-clip: text;
    background-clip: text;

    &:before {
      content: "";
      position: absolute;
      width: 10px;
      height: 10px;
      left: 0;
      top: 7px;
      background-color: #3a8fff;
      clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    }
  }

  .content {
    display: flex;
    justify-content: space-between;
  }

  .chart {
    width: 30%;

    p {
      font-size: 24px;
      font-weight: bold;
      text-align: center;
      color: transparent;
      background-image: linear-gradient(to bottom, #ecfbff, #00f6ff);
      -webkit-background-clip: text;
      background-clip: text;
    }
  }

  .system {
    width: 70%;
    display: flex;
    justify-content: space-between;

    > div {
      width: 32%;
      height: 190px;
      padding: 10px;
      box-sizing: border-box;
      background-color: rgba(11, 44, 106, 0.8);
      border-radius: 4px;

      .top {
        display: flex;
        align-items: center;

        img {
          width: 23px;
          height: 23px;
          margin-right: 10px;
        }

        span {
          color: #fff;
          font-size: 14px;
        }
      }

      .bottom {
        text-align: center;

        .left {
          color: #37c9c9;
          font-size: 14px;
          margin-top: 30px;
          margin-bottom: 10px;

          span {
            margin-right: 5px;
            font-size: 32px;
            font-weight: bold;
          }
        }

        .right {
          display: flex;
          align-items: center;
          width: 100%;
          justify-content: center;
          color: #0eff36;

          .rate {
            img {
              width: 7px;
              height: 12px;
              margin-right: 5px;
            }

            span {
              font-size: 16px;
              font-weight: bold;
            }
          }

          .text {
            margin-right: 5px;
            font-size: 12px;
          }

          &.on {
            color: #ff4f4f;
          }
        }
      }
    }
  }
}
</style>
